import 'package:flutter/material.dart';
import 'package:sample2/model/chat/chat_user.dart';
import 'package:sample2/pages/chat/conversation_list_item.dart';

class ChatList extends StatefulWidget {
  const ChatList({super.key});
  @override
  State<StatefulWidget> createState() {
    return ChatPageState();
  }
}

class ChatPageState extends State {
  List<ChatUser> chatusers = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Chat List")),
        body: SingleChildScrollView(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const ChatListHeader(),
            const ChatListSearchComponent(),
            ListView.separated(
              itemCount: chatusers.length,
              shrinkWrap: true,
              padding: const EdgeInsets.only(top: 16),
              physics: const NeverScrollableScrollPhysics(),
              separatorBuilder: (context, index) => const Divider(
                height: 1,
                color: Colors.grey,
              ),
              itemBuilder: (context, index) {
                return ConversationListItem(
                  user: chatusers[index],
                  isMessageRead: (index == 0 || index == 3) ? true : false,
                );
              },
            )
          ],
        )));
  }
}

class ChatListHeader extends StatelessWidget {
  const ChatListHeader({super.key});
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            const Text(
              "Conversations",
              style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
            ),
            Container(
              padding:
                  const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.pink[50]),
              child: Row(children: const <Widget>[
                Icon(
                  Icons.add,
                  color: Colors.pink,
                  size: 20,
                ),
                SizedBox(
                  width: 2,
                ),
                Text(
                  "Add New",
                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                )
              ]),
            )
          ],
        ),
      ),
    );
  }
}

class ChatListSearchComponent extends StatelessWidget {
  const ChatListSearchComponent({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        top: 10,
        left: 16,
        right: 16,
      ),
      child: TextField(
        decoration: InputDecoration(
          hintText: "Search...",
          hintStyle: TextStyle(color: Colors.grey.shade600),
          prefixIcon: Icon(
            Icons.search,
            color: Colors.grey.shade600,
            size: 20,
          ),
          filled: true,
          fillColor: Colors.grey.shade100,
          contentPadding: const EdgeInsets.all(8),
          enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
              borderSide: BorderSide(color: Colors.grey.shade100)),
        ),
      ),
    );
  }
}
